<!--评审-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-button color-yellow width180" @click="downloadFile">
        <img src="../../../../assets/assessment/icon-import.png" alt="" />
        <span>下载全部评审资料</span>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">课题名称：</div>
            <el-input size="mini" style="width: 122px;" v-model="dataForm.fillSubjectName"></el-input>
        </div>
      <div class="search-button color-primary width70" @click="initList">
        <img src="../../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container table-css">
        <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="55"></el-table-column>
            <el-table-column prop="roleName" label="序号" align="center">
              <template slot-scope="scope">
                  {{scope.$index + 1 + (parseInt(dataForm.current) - 1) * 50  }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="200">
                <div slot-scope="scope">
                    <span class="small-btn color-yellow width120" v-if="scope.row.type == 1" @click="downloadFile(scope.row)" >
                        <img src="../../../../assets/assessment/icon-import.png"> 下载评审资料
                    </span>
                    <span style="margin-top:15px" class="small-btn color-green" @click="startBtn(scope.row)" v-if="!scope.row.score">
                        <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 开始评审
                    </span>
                    <span style="margin-top:15px" class="small-btn color-primary width96" @click="startBtn(scope.row)" v-if="scope.row.score">
                        <img src="../../../../assets/assessment/icon-primary-edit.png"> 已评审
                    </span>
                </div>
            </el-table-column>
            <el-table-column prop="fillSubjectName" label="课题名称" align="center" min-width="200"> </el-table-column>
            <el-table-column prop="researchContent" label="研究内容" align="center" min-width="200"> </el-table-column>
            <el-table-column prop="projectCategory" label="课题类别" align="center" min-width="200"> </el-table-column>
            <el-table-column prop="reviewDate" label="评审日期" align="center" min-width="150"> </el-table-column>
            <el-table-column prop="score" label="评审分数" align="center" min-width="120"> </el-table-column>
            <el-table-column prop="ranking" label="评审名次" align="center" min-width="120"> </el-table-column>
            <el-table-column prop="opinion" label="评审意见" align="center" min-width="250"> </el-table-column>
        </el-table>
        <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.current-1)*50 == 0?1:(dataForm.current-1)*50}}-{{total>50?dataForm.current*50:total}}条</h1>
        <div class="pagination-block">
            <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
            :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
        <div class="button-group list-btn">
          <div class="" @click="dialogTS=true">提 交</div>
          <div class="" @click="listCancel">取 消</div>
        </div>
    </div>
    <!-- 提示 -->
    <el-dialog title="提 示" :visible.sync="dialogTS" :close-on-click-modal="false" width="50%">
      <h1 class="notice">您确定提交吗? 提交将后不可更改!</h1>
      <div class="button-group ts-list" slot="footer">
        <div class="" @click="saveTS">确定</div>
        <div class="" @click="dialogTS=false">取消</div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {pshdZJList,submitPSscore} from "@/api/teachingTopic";
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
        dialogTS:false,
        dataForm:{
          activityId:'',
          fillSubjectName:'',
          current:1,
          size:50
        },
        total:1,
        tableData: [],
        IDS:[],
    };
  },
  mounted(){
    this.dataForm.activityId = this.$route.query.activityId
    this.initList();
  },
  methods: {
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.activityId)
    },
    downloadFile(){
        Axios({
            method: 'get',
            url: this.$store.state.studentUrl.baseUrl+'/examBatch/exportData/manageList',
            params:this.dataForm,
            headers: {'Content-Type': 'application/octet-stream' },
                responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '评审材料.xlsx');
        });
    },
    //初始化表格
    async initList(){
      let res = await pshdZJList(this.dataForm);
      if(res.code == 200){
        let data = res.data.records;
        this.tableData = data;
        this.total = res.data.total
      }
    },
    currentPage(e){
      this.dataForm.current = e;
      this.initList()
    },
    listCancel(){
        this.$router.push({
            path:'/teachingTopics/review/expert/list'
        })
    },
    startBtn(row){
        this.$router.push({
            path:'/teachingTopics/review/expert/starting',
            query:{
              activityId:this.$route.query.activityId,
              currentFlow:this.$route.query.currentFlow,
              currentStage:this.$route.query.currentStage,
              fillId:row.fillId
            }
        })
    },
    async saveTS(){
      if(this.IDS.length <= 0){
        this.$message({
          type:'info',
          message:'请先选择需要提交的课题！'
        })
        return
      }
      let res = await submitPSscore(this.IDS);
      if(res.code == 200){
        this.$message({
          type:'success',
          message:'提交成功！'
        })
        this.dialogTS = false;
        this.initList()
      }
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>
<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.search-container {
  justify-content: flex-start !important;
}
.width70{width:70px;margin-left: 22px;}
.width120{width: 156px;}
.width96{width:96px}
.total-notice{margin-bottom: 10px;}
.color-green{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
  width: 110px;
  margin-top: 18px;
  margin-bottom: 18px;
  >img{width: 17px!important;height:17px!important}
}
.color-yellow{
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
}
.width180{width:180px;margin-right: 34px;}
 /deep/.button-group{
    padding-bottom: 20px;
    margin-top: 0px;
  }
  /deep/.el-dialog__body{
    padding: 30px 20px 0;
  }
  .list-btn{
    div:nth-child(1){
        background: #F1F8FE;
        border: 1px solid #51AEF6;
        color:#51AEF6
    }
  }
  .ts-list{
    padding-bottom: 60px;
    div{
        &:nth-child(1){
            background: #F1FFF8;
            border: 1px solid #02C86C;
            color: #02C86C;
        }
        &:nth-child(2){
            background: #FFF6EF;
            border: 1px solid #F3B815;
            color: #F3B815;
        }
    }
  }
  .notice{
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #004CA7;
    text-align: center;
    margin: 60px 0 92px;
}
</style>
